import Store from "../store";
import { replaceHtml, openSelfModel } from "../utils/util";
import { modelHTML } from "./constant";
import locale from "../locale/locale";

let isInitialSpecialMarkModel = false;
function initialSpecialMarkModel(itemData) {
  let pointName = sessionStorage.getItem("pointName") || "";
  if (isInitialSpecialMarkModel) {
    $("#tianqi-dataSource-required").prop("checked", false);
    $("#radioItemType2").prop("checked", true);
    $("#luckysheet-tianqi-dataSource-mark .pointName").text(pointName);
    $("#tianqi-dataSource-select-api").val("");
    $(".radioItemType1").hide();
    $(".radioItemType3").hide();
    return;
  }

  isInitialSpecialMarkModel = true;
  const _locale = locale();
  const locale_button = _locale.button;
  let roleList = Store.roleList;

  let radioItemType = "1";
  $("body").append(
    replaceHtml(modelHTML, {
      id: "luckysheet-tianqi-dataSource-mark",
      addclass: "luckysheet-tianqi-dataSource-mark",
      title: "设置数据来源",
      content: `
        <div class="luckysheet-sort-modal">
          <div>
            <input type="checkbox" id="tianqi-dataSource-required" class='pointer'>
            <label for="tianqi-dataSource-required" class='pointer'>是否必填</label>
          </div>
          <div class="slider-box-radios df">
              <div class="radio-item pointer">
                  <input type="radio" id="radioItemType2" name="radioItemType" value="2">
                  <label for="radioItemType2">手动输入</label>
              </div>
              <div class="radio-item pointer">
                  <input type="radio" id="radioItemType1" name="radioItemType" value="1">
                  <label for="radioItemType1">选择接口</label>
              </div>
              <div class="radio-item pointer">
                  <input type="radio" id="radioItemType3" name="radioItemType" value="3">
                  <label for="radioItemType3">选择数据点</label>
              </div>
          </div>
          <div class='align_center radioItemType1' style="display:${
            radioItemType === "2" ? "block" : "none"
          };">
            <span>选择接口</span>${setSelectHtml()}
          </div>
          <div class='align_center radioItemType3' style="display:${
            radioItemType === "3" ? "block" : "none"
          };">
            <span class='p-r-5'>选择数据点</span>
            <span class='pointName btn-primary btn f-s-12'>${
              pointName ? pointName : "+请选择数据点"
            }</span>
          </div>
          <input type="hidden" id="tianqi-dataSource-hidden-point" value="">
        </div>
        `,
      botton: `<button id="luckysheet-tianqi-dataSource-mark-confirm" class="btn btn-primary">${locale_button.confirm}</button>
      <button class="btn btn-default luckysheet-model-close-btn">${locale_button.cancel}</button>`,
      style: "z-index:1012;width:500px;",
    })
  );

  $("#luckysheet-tianqi-dataSource-mark-confirm").click(function () {
    if (!Store.drawSettingList) {
      Store.drawSettingList = [];
    }
    let obj = {};
    let isRequired = $("#tianqi-dataSource-required").prop("checked");
    if (radioItemType === "1") {
    } else if (radioItemType === "2") {
      let selectKey = $("#tianqi-dataSource-select-api").val();
      obj["keyContent"] = selectKey;
    } else if (radioItemType === "3") {
      let pointName = $("#luckysheet-tianqi-dataSource-mark .pointName").text();
      let pointObj = $("#tianqi-dataSource-hidden-point").val();
      if (pointName === "+请选择数据点") {
        obj["pointName"] = pointName === "+请选择数据点" ? "" : pointName;
      } else {
        Object.assign(obj, JSON.parse(pointObj));
      }
    }
    obj["isRequired"] = isRequired ? 1 : 0;
    if (
      isRequired &&
      ((radioItemType === 2 && !obj.keyContent) ||
        (radioItemType === 3 && !obj.pointName))
    ) {
      alert("请完善设置数据来源");
    } else {
      Store.drawSettingList.push(obj);
      $("#luckysheet-tianqi-dataSource-mark").hide();
      $("#luckysheet-modal-dialog-mask").hide();
    }
  });
  $("#luckysheet-tianqi-dataSource-mark")
    .off("change.radio")
    .on(
      "change.radio",
      ".slider-box-radios input[type=radio][name=radioItemType]",
      function (e) {
        radioItemType = this.value;
        if (this.value == 2) {
          $(".radioItemType1").hide();
          $(".radioItemType3").hide();
        } else if (this.value == 1) {
          $(".radioItemType1").show();
          $(".radioItemType3").hide();
        } else if (this.value == 3) {
          $(".radioItemType1").hide();
          $(".radioItemType3").show();
        }
      }
    );

  //选点
  $("#luckysheet-tianqi-dataSource-mark .pointName").click(function () {
    window.parent.postMessage(
      {
        command: "setDataSource",
      },
      "*"
    );
  });
}
function setSelectHtml() {
  let ot;
  let roleList = [
    { id: 1, name: "选择用户" },
    { id: 2, name: "当前日期" },
  ];
  let apiID = 3;
  roleList.forEach((item) => {
    if (item.id === apiID) {
      ot += `<option value="${item.id}" selected="selected">${item.name}</option>`;
    } else {
      ot += `<option value="${item.id}">${item.name}</option>`;
    }
  });
  return `<select id="tianqi-dataSource-select-api">${ot}</select>`;
}
//
export function openSetDataSourceMarkModel(itemData) {
  $("#luckysheet-rightclick-menu").hide();
  initialSpecialMarkModel(itemData);
  openSelfModel("luckysheet-tianqi-dataSource-mark");
}
